<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--    //设置viewport 进入页面时，页面适配手机屏幕大小 初始化缩放比例为1.0倍-->
    <title>地图导航定位</title>
    <style rel="stylesheet" type="text/css">
        /*去除正文区域内外间距*/
        body {
            margin: 0;
            padding: 0;
        }

        /*地图加载容器大小*/
        #container {
            width: 100%;
             height: 100vh;
        }
    </style>
</head>
<body>
<!--这里是前端HTML的开发 利用JS脚本，实现与高德地图开发接口的交互，实现地图的显示与定位功能 嵌入指定的html内容-->

<!--//引入高德地图API-->
<div id="container"></div>
<!--设置全局变量-->
<script type="text/javascript">
    <!--将密钥设置到全局后面很多代码都需要使用  在当前window对象中，追加指定名称的属性-->
    window._AMapSecurityConfig = {
        <!--      密钥-->
        securityJsCode: '47c97ae6a963632dc446263d6b8daa11'
    };
</script>
<!--加载官方地图脚本-->
<script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=fbabd3ae0e5cefa5ad9bca1664cb7456"
></script>

<!--自定义脚本开发-->
<script type="text/javascript">
    <!--    这里的代码默认执行  创建地图对象 进行初始化('绑定的容器ID'，{配置项})-->
    var map = new AMap.Map(
        "container",   //绑定的容器ID
        {
            zoom: 18, //地图缩放级别
            center: [116.46, 39.92], //地图中心点,初始地图经纬度
        }
    );

    //当前页面加载完毕后，执行定位函数
    window.onload = function () {
    //调用鸿蒙端，代理注册过来的函数，设置定位点
    window.swift.setCurrentLocation()
    };

    //方法：定位设置
    function setLocation(lon,lat){
        //设置中心点
        map.setZoomAndCenter(25, [lon, lat]);
        //设置标记点
        var marker = new AMap.Marker({
            position: [lon, lat],
            map: map,
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
        });
        //加入到地图中
        map.add(marker);

        //为地图新增插件能力  搜索功能
        map.plugin(['AMap.PlaceSearch'],function(){
            //实例化地点查询类 创建搜索功能对象，提供搜索设置
            var MSearch = new AMap.PlaceSearch({
                pageSize: 4, //显示结果条数
                pageIndex: 1, //初始页码
                map: map, //绑定地图对象
                extensions: "base", //返回结果数据类型
            });
            //为地图设置监听：当搜索结果完成时
            AMap.Event.addListener(MSearch,'complete',(res)=>{
                //调用鸿蒙方法，传回搜索结果
                //通讯传递，只能是字符串string
                window.swift.receiveNearPlace(JSON.stringify(res.poiList.pois));
            });

            //执行搜搜功能：自动标记
            MSearch.searchNearBy('停车场',[lon, lat]);
        });
    }
</script>
</body>
</html>